<template>
  <!-- 项目类型新增 -->
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    class="dialogStyleSmall"
  >
    <div style="text-align:left">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型名称" prop="typeName">
              <el-input v-model="formData.typeName" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型排序" prop="orderNum">
              <el-input-number
                v-model="formData.orderNum"
                style="width: 100%"
                size="medium"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="remark">
              <label slot="label" v-html="`备&emsp;&emsp;注`" />
              <el-input v-model="formData.remark" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm('form')">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addProjectType,
  editProjectType,
  detailProjectType,
  getMaxNum
} from '@/api/superviseBaseInfo/typeManage/projectType'
export default {
  name: 'AddDialog',
  data() {
    return {
      proOptions: [],
      /* 表单 start */
      btnDisabled: false,
      dialogTitle: '', // 弹框标题
      dialogVisible: false, // 弹框显隐
      formData: {
        id: '',
        parentId: null, // 父级id
        typeName: '', // 类型名称
        orderNum: '', // 排序
        remark: '' // 备注
      },
      rules: {
        typeName: [
          { required: true, message: '类型名称不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '类型排序不能为空', trigger: 'blur' }
        ]

      }
      /* 表单 start */
    }
  },
  methods: {
    /* 新增/编辑 start */
    // 初始化弹出
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.emptyForm()
      if (id) {
        // 获取详情
        this.getDetailById(id)
      } else {
        // 获取最大排序
        this.getMaxNum()
      }
    },
    // 获取最大排序
    async getMaxNum() {
      const { data } = await getMaxNum()
      this.formData.orderNum = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailProjectType(id)
      this.formData = { ...data }
    },
    // 添加弹框取消
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
    },
    // 添加/编辑页面确定按钮
    submitForm(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) {
            // 编辑
            await editProjectType(this.formData)
            this.msgSuccess('修改成功!')
          } else {
            await addProjectType(this.formData)
            this.msgSuccess('保存成功!')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 设置提交的值为空
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
    }
  /* 新增/编辑 end */
  }
}
</script>

